{extend name="public/base" /}

{block name="title"}<title>{$Think.lang.list}</title>{/block}

{block name="pjax_container"}
<section class="content-header content-back body-top">
    <h5>合同列表</h5>
</section>
<div class="content-main" id="content-main">
    <div class="content content-back" id="content-back" style="min-height: 500px;">
        <div class="col-xs-12 col-md-12 col-lg-12 main-box" id="main-content">
            <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
                <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">合同名称
                    <pub>*</pub>
                    :
                </div>
                <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
                    <input name="title" id="title" type="text" autocomplete="off" class="form-control radius-none _data"
                           required="required">
                </div>
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
                <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">所属项目:</div>
                <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
                    {volist name="prolist" id="vo"}
                    <input type="checkbox" name="project_id" value="{$vo.id}">{$vo.project_name}
                    {/volist}
                </div>
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
                <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">签署公司:</div>
                <div class="col-lg-3 col-md-5 col-xs-7 filed-from padding-none">
                    <select class="form-control" name="company_id" id="company_id">
                        {volist name="comlist" id="vo"}
                        <option value="{$vo.account}">{$vo.company_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
                <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">截止时间
                    <pub>*</pub>
                    :
                </div>
                <div class="col-sm-2 filed-from padding-none">
                    <div class="input-group">
                        <input class="form-control timepicker" id="expiretime" name="release_time" value=""
                               placeholder="">
                        <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12 padding-none lists">
                <div class="col-lg-2 col-md-3 col-xs-5 filed-name text-right">合同
                    <pub>*</pub>
                    :
                </div>
                <div class="col-md-7 filed-from padding-none">
                    <input type="file" id="file" name="file">
                </div>
            </div>
            <div class="col-xs-12 col-md-12 col-lg-12 lists text-center">
                <input type="hidden" value="" name="id" class="_data">
                <input type="submit" name="dosubmit" value="下一步" class="btn dosubmit btn-success radius-none nextStep">
                <!--<button type="button" class="btn btn-primary" onclick="resetForm()">重置</button>-->
                <input type="reset" value="重置" class="btn btn-info radius-none">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/hry/js/spark-md5.js"></script>
<script type="text/javascript" src="__STATIC__/hry/js/pdf.js"></script>
<!--<script type="text/javascript" src="__STATIC__/hry/js/pdf.worker.js"></script>-->
<style type="text/css">
    body {
        background-color: inherit !important;
    }

    .content-wrapper, .right-side {
        background-color: inherit;
    }

    .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
        background-color: inherit !important;
    }

    .slimScrollDiv {
        background-color: #222d32;
    }
</style>
<script type="text/javascript" id="script">
    $(function () {
        $('.timepicker').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',   //YYYY-MM-DD HH:mm:ss
            locale: moment.locale('zh-cn')
        });
        var pdf = 'pdf';
        $('[type="file"]').change(function () {
            var fileName = $('[type="file"]').val(), val1 = fileName.lastIndexOf("."), val2 = fileName.length,
                suffix = fileName.substring(val1 + 1, val2);
            if (suffix != pdf) {
                alert('请选择pdf文件!');
                $('[type="file"]').val('');
                return;
            }
        });

        $('[type="reset"]').click(function () {
            $('#title').val('');
            var $defaults = $('input:checkbox[checked]');
            $('input:checkbox').attr('checked', false);
            $defaults.attr('checked', true);
            $("select:first option:first").attr("selected", true);
            $('#expiretime').val('');
            $('[type="file"]').val('');
        });

        $('.nextStep').click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            var title = $('#title').val(), checked = $("input[type='checkbox']").is(':checked'),
                expiretime = $('#expiretime').val(), file = $('[type="file"]').val();
            if ($.trim(title) == '') {
                $.amaran({'message': '请输入合同名称'});
                return;
            } else if (checked == false) {
                $.amaran({'message': '请选择所属项目'});
                return;
            } else if (expiretime == '') {
                $.amaran({'message': '请选择截止时间'});
                return;
            } else if (file == '') {
                $.amaran({'message': '请选择合同'});
                return;
            } else {
                var title = $("#title").val();
                var project_id = $("input:checkbox[name='project_id']:checked").map(function (index, elem) {
                    return $(elem).val();
                }).get().join(',');
                var company_id = $("#company_id").val();
                var expiretime = $("#expiretime").val();
                var file = $("#file")[0].files[0];
                var reader = new FileReader();
                var data = {
                    'title': title,
                    'project_id': project_id,
                    'company_id': company_id,
                    'expiretime': expiretime,
                    'file': reader.onload = function () {
                        var result = this.result;//文件内容
                        localStorage.setItem("fileresult", result);
                    }
                };
                reader.readAsDataURL(file);
                datas = JSON.stringify(data);//将JSON对象转化成字符串
                localStorage.setItem('data', datas);
                $('#content-main').empty();
                setTimeout(function () {
                    hetongList();
                }, 1000);
                return true;
            }
        });
        var str = '';

        //fmd5 = SparkMD5.ArrayBuffer.hash(file);
        function hetongList() {
            var datas = localStorage.getItem('data'), file = localStorage.getItem('fileresult');
            sli = file.slice(28);
            str += "<div id='tools'>";
            str += "<div id='username' class='toolsbox'draggable='true' ondragstart='drag(event)'>用户名</div>";
            str += "<div id='idcard' class='toolsbox' draggable='true' ondragstart='drag(event)'>用户身份证</div>";
            str += "<div id='money1' class='toolsbox' draggable='true' ondragstart='drag(event)'>小写金额1</div>";
            str += "<div id='bmoney1' class='toolsbox' draggable='true' ondragstart='drag(event)'>大写金额1</div>";
            str += "<div id='money2' class='toolsbox' draggable='true' ondragstart='drag(event)'>小写金额2</div>";
            str += "<div id='bmoney2' class='toolsbox' draggable='true' ondragstart='drag(event)'>大写金额2</div>";
            str += "<div id='uz' class='toolsbox'  draggable='true' ondragstart='drag(event)'>用户签章</div>";
            str += "<img id='gz' src='__STATIC__/hry/images/gz.png' draggable='true' ondragstart='drag(event)'/>"
            str += "</div>";
            str += "<div id='pdfmain' class='pdfmain'></div>";
            str += "<div><input type='button' style='padding: 20px;margin-left: 56px;margin-top:10px'; name='dosubmit' value='保存' class='btn dosubmit btn-success radius-none'></div>";
            //合同坐标请求URL地址,

            var script = document.createElement("script"), url = "__STATIC__/hry/js/drag.js";
            script.type = "text/javascript";
            script.src = url;
            var PDFJS = window['pdfjs-dist/build/pdf'],
                pdfData = atob(sli);
            window.data = {
                'username': [],
                'idcard': [],
                'money1': [],
                'bmoney1': [],
                'money2': [],
                'bmoney2': [],
                'uz': [],
                'gz': [],
                'width': [],
                'height': [],
                'pages': [],
                'page': [],
                'title': "",
                'project_id': "",
                'company_id': "",
                'expiretime': "",
                'fmd5': sli,
                'fdata': file,
                'pdfdata': sli
            };
            pdfjsLib.GlobalWorkerOptions.workerSrc = '__STATIC__/hry/js/pdf.worker.js';
            PDFJS.getDocument({
                data: pdfData,
                cMapPacked: true
            }).then(function getPdfHelloWorld(pdf) {

                for (var i = 1; i < pdf.numPages + 1; i++) {
                    //
                    // 获取第i页
                    //
                    pdf.getPage(i).then(function getPageHelloWorld(page) {
                        var scale = 1.5;
                        var viewport = page.getViewport(scale);
                        //
                        // Prepare canvas using PDF page dimensions
                        //
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');

                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        window.data['width'] = viewport.width;
                        window.data['height'] = viewport.height;
                        var boxs = document.createElement('div');
                        boxs.className = 'box';
                        boxs.id = page.pageIndex + 1;
                        boxs.style.height = viewport.height + 'px';
                        boxs.style.width = viewport.width + 'px';
                        boxs.ondrop = function () {
                            drop(event)
                        };
                        boxs.ondragover = function () {
                            allowDrop(event)
                        };
                        // 这里拿body当pdf容器

                        document.getElementById('pdfmain').appendChild(boxs);
                        boxs.appendChild(canvas);
                        //
                        // Render PDF page into canvas context
                        //
                        page.render({canvasContext: context, viewport: viewport});
                    });
                    window.data['pages'] = i;
                }
            });
            $('#content-main').append(str);
            $('#content-main').append(script);
        }
    });
    function resetForm() {
        $('input[name="search"]').val('')
    }
</script>
{/block}